import { useRef } from "react"
import { addBanner } from './../../api/banner'

const Com = ({history}) => {
  const linkRef = useRef()
  const fileRef = useRef()
  const altRef = useRef()
  const imgPutRef = useRef()
  const imgRef = useRef()
  const getFile = () => {
    const file = fileRef.current.files[0]
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function () {
      imgRef.current.src = this.result
      imgPutRef.current.value = this.result
    }
  }
  const submitBanner = () => {
    const data = {
      link: linkRef.current.value,
      alt: altRef.current.value,
      img: imgPutRef.current.value
    }
    addBanner(data).then(res => {
      history.goBack()
    })
  }
  return (
    <div>
      <input type="text" ref={ linkRef } name="link" placeholder="链接"/> <br/>
      <input type="text" ref={ altRef } name="alt" placeholder="描述"/><br/>
      <input type="file" ref={ fileRef } onChange = { getFile }/><br/>
      <input type="text" ref={ imgPutRef } name="img"/><br/>
      <img ref= {imgRef}  src="" alt=""/><br/>
      <button onClick = { submitBanner }>提交</button>
    </div>
  )
}
export default Com